<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('项目收益列表')" />
    <th:block th:include="include :: daterangepicker-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>日期：</label>
                                <input type="text" name="dateInfo" id="dateInfo" autocomplete="off"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="loadChartData();"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="col-sm-12 select-table table-striped">
                <div class=" ibox ">
<!--                    <div class="ibox-title">-->
<!--                        <h5>折线图</h5>-->
<!--                    </div>-->
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
     <th:block th:include="include :: daterangepicker-js" />
     <th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">

        var prefix = ctx + "profit/profit";

        $(function() {
            $('#dateInfo').daterangepicker({
                autoUpdateInput: false,
                "locale": {
                    "direction": "ltr",
                    "format": "YYYY-MM-DD",
                    "separator": " ~ ",
                    "applyLabel": "确定",
                    "cancelLabel": "取消",
                    "daysOfWeek": [ "七", "一", "二", "三", "四", "五", "六"],
                    "monthNames": ["1","2","3","4","5","6","7","8","9","10","11","12"],
                },
            });
            $('#dateInfo').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD') + ' ~ ' + picker.endDate.format('YYYY-MM-DD'));
            });
            $('#dateInfo').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });



            loadChartData();

        });

        function loadChartData(){

            var dateInfo = $("#dateInfo").val()
            var url = prefix + '/chartList'

            var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
            var lineoption = {
                title : {
                    text: '项目收益变化'
                },
                tooltip : {
                    trigger: 'axis'
                },
                // legend: {
                //     data:['最高气温', '最低气温', '最低气温111']
                // },
                grid:{
                    x:40,
                    x2:40,
                    y2:40,
                    left: 50
                },
                calculable : true,
                // xAxis : [
                //     {
                //         type : 'category',
                //         boundaryGap : false,
                //         data : ['周一','周二','周三','周四','周五','周六','周日','周日']
                //     }
                // ],
                yAxis : [
                    {
                        type : 'value',
                        name: '收益(元)',
                    }
                ],
                // series : [
                //     {
                //         name:'最高气温',
                //         type:'line',
                //         data:[11, 11, 15, 13, 12, 13, 10],
                //     },
                //     {
                //         name:'最低气温',
                //         type:'line',
                //         data:[1, -2, 2, 5, 3, 2, 0],
                //     },
                //     {
                //         name:'最低气温111',
                //         type:'line',
                //         data:[11, -12, 12, 15, 13, 12, 10],
                //     }
                // ]
            };

            $.ajax({
                type: "post",
                url: url,
                data: {
                    "dateInfo": dateInfo
                },
                success: function(result) {
                    if (result.code == 0) {

                        lineoption.legend = {
                            data: result.data.tileInfoList
                        }
                        lineoption.xAxis = [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : result.data.dateInfoList
                            }
                        ]

                        lineoption.series = result.data.chartDataList;

                        lineChart.setOption(lineoption);
                        $(window).resize(lineChart.resize);

                    }
                }
            });

        }
    </script>
</body>
</html>